<template>
  <div class="video-player-container">
    <h1 class="title">视频播放</h1>
    <div class="video-wrapper">
      <video ref="videoPlayer" controls="controls" width="100%">
        <source :src="videoUrl" type="video/mp4">
        抱歉，您的浏览器不支持内嵌视频播放，您可以下载视频后观看。
      </video>
    </div>
    <div class="video-info">
      <h2>{{ name }}</h2>
      <p>格式：{{ format }}</p>
      <!-- <p>大小：{{ videoInfo.size }}</p> -->
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import { playVideo } from '@/api/video'
// import { Message } from 'element-ui'
export default {
  data() {
    return {
      videoUrl: this.$route.query.url,
      name: this.$route.query.name,
      format: 'MP4'
      // videoMedia_root: this.$route.query.media_root,
    }
  },
  mounted() {
    this.playVideo()
    // 访问传递的参数
    // axios.get('/api/imagemodule/downloadvideo/', {
    //   params: {
    //     url: this.videoUrl
    //   }, responseType: 'blob' })
    // playvideo({ url: this.videoUrl, media_root: this.videoMedia_root })
    //   .then(response => {
    //     const blob = new Blob([response.data], { type: 'video/mp4' })
    //     const url = URL.createObjectURL(blob)
    //     this.$refs.videoPlayer.src = url

    //     // 清理 Blob URL
    //     this.$refs.videoPlayer.onended = () => {
    //       URL.revokeObjectURL(url)
    //     }
    //   })
    //   .catch(error => {
    //     console.error('Error fetching video:', error)
    //   })
    // this.play1Video()
  },
  methods: {
    // 播放视频
    playVideo() {
      playVideo({ path: this.videoUrl })
        .then(response => {
          console.log(response)
          const blob = new Blob([response.data], { type: 'video/mp4' })
          console.log(blob)
          const url = URL.createObjectURL(blob)
          this.$refs.videoPlayer.src = url

          // 清理 Blob URL
          this.$refs.videoPlayer.onended = () => {
            URL.revokeObjectURL(url)
          }
        })
        .catch(error => {
          console.error('Error fetching video:', error)
        })
      // const url = this.videoMedia_root + '/videos/' + this.videoUrl.split('videos/')[1]
      // const param = {
      //   url: this.videoUrl,
      //   media_root: this.videoMedia_root
      // }
      // // console.log('删除视频', video)
      // // 发送到searchvideo处理
      // this.$store.dispatch('video/playvideo', param)
      //   .then((response) => {
      //     // 请求成功，处理后端返回的数据
      //     console.log('播放视频成功')
      //     Message({
      //       type: 'success',
      //       message: '播放成功!'
      //     })
      //     // 重新搜索以刷新列表
      //     // this.searchVideos()
      //   })
      //   .catch((error) => {
      //     // 请求失败，处理错误
      //     Message({
      //       type: 'error',
      //       message: '播放失败: ' + error.message
      //     })
      //     console.error('Error:', error)
      //   })
    }
  }
}
</script>

  <style>
  .video-player-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #f5f5f7;
    color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .title {
    text-align: center;
    color: #4a4a4a;
  }

  .video-wrapper {
    background-color: #000;
    border-radius: 4px;
    overflow: hidden;
  }

  .video-info {
    margin-top: 20px;
  }

  video {
    display: block; /* 去除视频播放器下方的空隙 */
  }
  </style>
